<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>商家管理</p>
		</header>

		<!-- 商家信息部分 -->
		<div class="business-info" v-if="business">
			<div class="business-avatar">
				<img :src="business.businessImg" alt="商家头像">
			</div>
			<div class="business-detail">
				<h3>{{ business.businessName }}</h3>
				<p>{{ business.businessAddress }}</p>
			</div>
		</div>

		<!-- 管理菜单 -->
		<ul class="manage-menu">
			<li @click="toFoodManage">
				<i class="fa fa-cutlery"></i>
				<span>商品管理</span>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="toBusinessWallet">
				<i class="fa fa-credit-card"></i>
				<span>商家钱包</span>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="toOrderManage">
				<i class="fa fa-list-alt"></i>
				<span>订单管理</span>
				<i class="fa fa-angle-right"></i>
			</li>
			<li @click="toBusinessInfo">
				<i class="fa fa-info-circle"></i>
				<span>商家信息</span>
				<i class="fa fa-angle-right"></i>
			</li>
		</ul>

		<!-- 退出登录按钮 -->
		<div class="logout-button">
			<button @click="logout">退出登录</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'BusinessManage',
		data() {
			return {
				business: null
			}
		},
		created() {
			// 获取商家信息
			this.business = this.$getSessionStorage('business');
			if (!this.business) {
				alert('请先登录');
				this.$router.push({ path: '/businessLogin' });
			}
		},
		methods: {
			toFoodManage() {
				// 跳转到商品管理页面
				this.$router.push({ path: '/foodManage' });
			},
			toBusinessWallet() {
				// 跳转到商家钱包页面
				this.$router.push({ path: '/businessWallet' });
			},
			toOrderManage() {
				// 跳转到订单管理页面
				this.$router.push({ path: '/orderManage' });
			},
			toBusinessInfo() {
				// 跳转到商家信息编辑页面
				this.$router.push({ path: '/businessInfoEdit' });
			},
			logout() {
				// 退出登录
				this.$removeSessionStorage('business');
				alert('退出成功');
				this.$router.push({ path: '/businessLogin' });
			}
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家信息部分 ******************/
	.business-info {
		margin-top: 14vw;
		padding: 4vw;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.business-avatar {
		width: 15vw;
		height: 15vw;
		margin-right: 3vw;
	}

	.business-avatar img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	.business-detail h3 {
		font-size: 4.5vw;
		color: #333;
		margin: 0;
		margin-bottom: 1vw;
	}

	.business-detail p {
		font-size: 3.5vw;
		color: #666;
		margin: 0;
	}

	/****************** 管理菜单 ******************/
	.manage-menu {
		margin-top: 3vw;
		background-color: #fff;
	}

	.manage-menu li {
		display: flex;
		align-items: center;
		padding: 4vw;
		border-bottom: 1px solid #f0f0f0;
	}

	.manage-menu li i:first-child {
		font-size: 5vw;
		color: #0097FF;
		margin-right: 3vw;
		width: 5vw;
		text-align: center;
	}

	.manage-menu li span {
		flex: 1;
		font-size: 4vw;
		color: #333;
	}

	.manage-menu li i:last-child {
		font-size: 4vw;
		color: #999;
	}

	/****************** 退出登录按钮 ******************/
	.logout-button {
		margin-top: 5vw;
		padding: 0 4vw;
	}

	.logout-button button {
		width: 100%;
		height: 10vw;
		background-color: #ff3b30;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 4vw;
	}
</style> 